<template>
  <cube-page type="button-view" title="业务员选择" :rightBtn="false">
    <div slot="content">
      <div class="filterWrap">
        <cube-input class="zinput" v-model="kw" placeholder="请输入关键字" clearable>
          <i slot="prepend" class="cubeic-search"></i>
        </cube-input>
      </div>
      <div class="treeWrap">
        <vs-tree 
          v-if="tree"
          ref="tree"
          :data="tree" 
          node-key="id" 
          :props="defaultProps" 
          show-checkbox 
          :default-expanded-keys="defaultCheck"
          :default-checked-keys="defaultCheck"
          :filter-node-method="filterNode"
          @check-change="handleCheckChange">
        </vs-tree>
      </div>
      
      <div class="zcardBtns">
        <cube-button class="zbtn J_reset" @click="zreset">返回</cube-button>
        <cube-button class="zbtn J_sub" @click="zsubmit">确定</cube-button>
      </div>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import BusFactory from 'vue-happy-bus';
import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'

export default {
  name: 'CommunicateMember',
  components: {
    CubeView,
    CubePage,
    Drawer
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      bus: BusFactory(this),
      showLoading: true,
      drawerShow: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      searchOut: {
        dept: '',
        name: '',
      },
      kw: '',
      defaultCheck: [],
      tree: []
    }
  },
  created () {
    let lst_tree = this.zutil.lStorage.getParam('lst_tree');
    if(lst_tree){
      lst_tree = JSON.parse(lst_tree);

      this.zutil.deepClone(this.tree, lst_tree);
    }
  },
  mounted() {

    let lst_chooseMember = this.zutil.lStorage.getParam('lst_chooseMember');
    if(lst_chooseMember){
      lst_chooseMember = JSON.parse(lst_chooseMember);

      if(lst_chooseMember.members && lst_chooseMember.members.length){
        this.$nextTick(()=>{
          lst_chooseMember.members.forEach(v=>{
            this.defaultCheck.push(v.id);
          })
          this.$refs.tree.setCheckedKeys(this.defaultCheck);
        })
      }
    }
  },
  watch: {
    kw(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    zreset () {
      this.$router.go(-1);
    },
    zsubmit () {
      let _nodes = this.$refs.tree.getCheckedNodes();

      let arr = [],
        arrName = [];
      if(_nodes && _nodes.length){
        _nodes.forEach(v=>{
          if(!v.children){
            arr.push(v);
            arrName.push(v.name);
          }
        })
      }
      if(arr.length){
        this.bus.$emit('chooseMember', {
          arr: arr,
          arrName: arrName
        });
        this.zreset();
      }else{
        this.$createToast({type: 'warn', time: 2000, txt: "请选择业务员"}).show();
      }
    },
    handleCheckChange (data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
}
</script>

<style scoped lang="scss">

.filterWrap {
  margin-bottom: 10px;
  .zinput {
    padding: 0 10px;
  }
}
.treeWrap {
  /deep/ {
    .vs-tree-node .vs-tree-node__content {
      height: 40px;
      line-height: 40px;
    }
  }
}
.zcardBtns {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  .zbtn {
    padding: 0;
    height: 46px;
    line-height: 46px;
    border-radius: 0;
    font-size: 14px;
    &.J_reset {
      width: 35%;
      color: #000;
      background-color: #f8f8f8;
    }
    &.J_sub {
      flex: 1;
      color: #fff;
      background-color: #e64340;
    }
  }
}
</style>
